@use './variables' as *;
@use './mixins' as *;

/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  
  @include smooth-scroll;
  
  // 高DPI屏幕适配
  @media (min-width: 2560px) {
    font-size: 16px;  // 改为16px符合8px栅格
  }
  
  @media (min-width: 3840px) {
    font-size: 20px;  // 符合8px栅格
  }
}

body {
  height: 100%;
  font-family: $font-family-primary;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: $font-size-base;
  line-height: 1.6;
  color: var(--app-text-primary);
  background-color: var(--app-bg-color);
  transition: background-color 0.3s ease, color 0.3s ease;

  @include mobile {
    font-size: $font-size-small;
    line-height: 1.5;
  }
}

#app {
  height: 100%;
  min-height: 100vh;
}

/* Theme Variables */
:root {
  /* Element Plus 主题色自定义 */
  --el-color-primary: #019C7C !important;
  --el-color-primary-light-3: rgba(1, 156, 124, 0.7) !important;
  --el-color-primary-light-5: rgba(1, 156, 124, 0.5) !important;
  --el-color-primary-light-7: rgba(1, 156, 124, 0.3) !important;
  --el-color-primary-light-8: rgba(1, 156, 124, 0.2) !important;
  --el-color-primary-light-9: rgba(1, 156, 124, 0.1) !important;
  --el-color-primary-dark-2: #0e8a71 !important;
  --el-border-radius-base: 4px;
  --el-font-size-base: 14px;
  --el-font-family: #{$font-family-primary};

  /* Light Theme Variables */
  --app-bg-color: #F5F7FA;
  --app-content-bg: #FFFFFF;
  --app-text-primary: #303133;
  --app-text-regular: #606266;
  --app-text-secondary: #909399;
  --app-border-color: #DCDFE6;
  --app-border-light: #E4E7ED;
  --app-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  --app-nav-bg: #FFFFFF;
  --app-sidebar-bg: #FFFFFF;
  --app-action-btn-bg: #F7F8FA;
}

/* Dark Theme Variables */
[data-theme="dark"] {
  --app-bg-color: #1a1a1a;
  --app-content-bg: #2d2d2d;
  --app-text-primary: rgba(255, 255, 255, 1);
  --app-text-regular: #cfd3dc;
  --app-text-secondary: #a3a6ad;
  --app-border-color: #414243;
  --app-border-light: #363637;
  --app-shadow: 0 2px 4px rgba(0, 0, 0, 0.24), 0 0 6px rgba(0, 0, 0, 0.08);
  --app-nav-bg: #2d2d2d;
  --app-sidebar-bg: #2d2d2d;
  --app-action-btn-bg: #3c3c3c;

  /* Element Plus Dark Theme Adjustments */
  --el-bg-color: #2d2d2d !important;
  --el-bg-color-page: #1a1a1a !important;
  --el-text-color-primary: rgba(255, 255, 255, 1) !important;
  --el-text-color-regular: #cfd3dc !important;
  --el-text-color-secondary: #a3a6ad !important;
  --el-border-color: #414243 !important;
  --el-border-color-light: #363637 !important;
  --el-border-color-lighter: #2d2d2d !important;
  --el-fill-color-blank: #2d2d2d !important;
  --el-fill-color: #3c3c3c !important;
  --el-fill-color-light: #414243 !important;
}

/* 工具类样式 */

// 响应式容器
.container {
  width: 100%;
  max-width: $breakpoint-desktop;
  margin: 0 auto;
  padding: 0 $spacing-medium;
  
  @include mobile {
    padding: 0 $spacing-base;
  }
}

// 间距工具类
.m-0 { margin: 0; }
.m-1 { margin: $spacing-small; }
.m-2 { margin: $spacing-base; }
.m-3 { margin: $spacing-medium; }
.m-4 { margin: $spacing-large; }
.m-5 { margin: $spacing-extra-large; }

.p-0 { padding: 0; }
.p-1 { padding: $spacing-small; }
.p-2 { padding: $spacing-base; }
.p-3 { padding: $spacing-medium; }
.p-4 { padding: $spacing-large; }
.p-5 { padding: $spacing-extra-large; }

// 响应式间距
.m-responsive {
  margin: $spacing-medium;
  
  @include mobile {
    margin: $spacing-base;
  }
}

.p-responsive {
  padding: $spacing-medium;
  
  @include mobile {
    padding: $spacing-base;
  }
}

// 文本工具类
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.text-primary { color: $primary-color; }
.text-success { color: $success-color; }
.text-warning { color: $warning-color; }
.text-danger { color: $danger-color; }
.text-info { color: $info-color; }

// 显示工具类
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }

// Flex 布局工具类
.flex-center { @include flex-center; }
.flex-between { @include flex-between; }
.flex-around { @include flex-around; }

.flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flex-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}


// 文本省略
.ellipsis { @include text-ellipsis; }
.ellipsis-2 { @include text-ellipsis-multiline(2); }
.ellipsis-3 { @include text-ellipsis-multiline(3); }

// 卡片样式
.card { @include card-base; }
.card-hover {
  cursor: pointer;
  transition: all 0.3s ease;

  @include card-base;
  @include hover-effect;
}

// 滚动条样式
.scrollbar {
  &::-webkit-scrollbar {
    width: 8px;  // 改为8px符合8px栅格
    height: 8px;  // 改为8px符合8px栅格
  }
  
  &::-webkit-scrollbar-track {
    background: #F5F7FA;
    border-radius: 4px;  // 改为4px符合8px栅格
  }
  
  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;  // 改为4px符合8px栅格
    
    &:hover {
      background: #a8a8a8;
    }
  }
}

// 响应式显示工具类
@include mobile {
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
  .show-mobile-flex { display: flex !important; }
  .show-mobile-inline { display: inline !important; }
}

@include mobile-up {
  .hide-desktop { display: none !important; }
  .show-desktop { display: block !important; }
  .show-desktop-flex { display: flex !important; }
  .show-desktop-inline { display: inline !important; }
}

@include tablet {
  .hide-tablet { display: none !important; }
  .show-tablet { display: block !important; }
}


// 响应式文字大小
.text-responsive {
  font-size: $font-size-base;
  
  @include mobile {
    font-size: $font-size-small;
  }
  
  @include desktop-up {
    font-size: $font-size-medium;
  }
}

// 动画过渡
.transition {
  transition: all 0.3s ease;
}

// 悬停阴影
.hover-shadow {
  transition: box-shadow 0.3s ease;
  
  &:hover {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}

/* 移动端日期选择器弹出层优化 */
.mobile-date-picker {
  @media (max-width: 768px) {
    /* 限制最大宽度，防止超出屏幕 */
    max-width: calc(100vw - 32px) !important;
    /* 确保在屏幕范围内 */
    left: 16px !important;
    right: 16px !important;
    /* 使用较小的字体 */
    font-size: 13px !important;
    /* 添加z-index确保在最上层 */
    z-index: 9999 !important;
    
    /* 日期面板样式调整 */
    .el-picker-panel {
      width: auto !important;
      max-width: 100% !important;
      margin: 0 !important;
    }
    
    /* 日期范围选择器的两个面板调整为上下布局 */
    .el-picker-panel__content {
      display: flex !important;
      flex-direction: column !important;
      gap: 8px !important;
      overflow-x: auto !important;
    }
    
    /* 日期表格调整 */
    .el-date-table {
      font-size: 12px !important;
      min-width: unset !important;
      
      td {
        padding: 1px !important;
        min-width: 28px !important;
        
        span {
          height: 28px !important;
          width: 28px !important;
          line-height: 28px !important;
          font-size: 11px !important;
        }
      }
    }
    
    /* 头部月份切换按钮 */
    .el-date-picker__header {
      padding: 6px 8px !important;
      
      button {
        font-size: 12px !important;
        padding: 0 4px !important;
      }
      
      .el-date-picker__header-label {
        font-size: 13px !important;
      }
    }
    
    /* 快捷选项调整 */
    .el-picker-panel__sidebar {
      width: 100% !important;
      padding: 8px !important;
      border-right: none !important;
      border-bottom: 1px solid #e4e7ed !important;
      
      .el-picker-panel__shortcut {
        display: inline-block !important;
        width: calc(50% - 4px) !important;
        margin: 2px !important;
        padding: 6px 8px !important;
        font-size: 12px !important;
        text-align: center !important;
      }
    }
    
    /* 底部确认按钮 */
    .el-picker-panel__footer {
      padding: 8px !important;
      text-align: center !important;
      
      .el-button {
        font-size: 12px !important;
        height: 28px !important;
        padding: 0 12px !important;
        margin: 0 4px !important;
      }
    }
  }
}

/* 移动端日期选择器输入框优化 */
@media (max-width: 768px) {
  .el-date-editor.el-input {
    /* 确保输入框在小屏幕上合适显示 */
    font-size: 13px !important;
    
    .el-input__wrapper {
      padding: 0 6px !important;
    }
    
    .el-input__inner {
      font-size: 13px !important;
      height: 28px !important;
    }
    
    .el-range-separator {
      font-size: 12px !important;
      padding: 0 2px !important;
    }
    
    .el-input__suffix {
      .el-input__suffix-inner {
        .el-icon {
          font-size: 14px !important;
        }
      }
    }
  }
}

/* 防止移动端弹出日期选择器时页面被撑开 */
@media (max-width: 768px) {
  body:has(.mobile-date-picker) {
    overflow-x: hidden !important;
  }
  
  /* 确保弹出层不会导致水平滚动 */
  .mobile-date-picker * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Element Plus 日期选择器初始化修复 */
.el-picker__popper {
  /* 防止初始化时意外显示 */
  &[aria-hidden="true"] {
    display: none !important;
    visibility: hidden !important;
  }
}

/* 防止初始化时弹出层闪现 */
.el-picker__popper[data-popper-placement] {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* 初始化时隐藏所有遮罩层 */
.el-overlay {
  &:empty {
    display: none !important;
  }
}

/* 确保日期选择器组件正确初始化 */
.el-date-editor {
  .el-input__inner {
    cursor: pointer;
  }
  
  /* 防止初始化时的样式闪动 */
  &.el-input--small {
    transition: all 0.2s ease;
  }
}